<template>
  <div class="salary-container">
    <span class="salary-text">工资管理</span>
    <!-- 使用 svg 图标方法显示图标 -->
    <!-- 传参 使用链式语法 -，定义props使用驼峰 -->
    <!-- <svg-icon icon-class="eye-open" />
    <svg-icon icon-class="form" /> -->
  </div>
</template>
<script>
export default {
  name: 'Salary'
}
</script>

<style lang="scss" scoped>
// sfc 单文件组件中 style支持多种预处理器的， lang指定对应的预处理器
// scss,less浏览器不识别， loder做转换 -》css
// 使用
// 1.$定义变量  2.嵌套语法  （结构统一好理解，嵌套层次别太深） 3.模块化 （js css 两个问题：复用+好维护）
// &表示当前元素
// @import是css使用的 import是js用的

//使用模块化
//1.在哪个语法块中导入 就在哪个组件中生效 不是全局的
//2.~保证别名路径@（src）在这里能正确识别固定的语法
//3.
//4.
//5.
@import '~@/styles/variables.scss';
$higth-color:red;
.salary-container{
  padding:30px;
  color: $higth-color;
  //使用模块化
  .salary-text{
    color: $green;
  }
}
</style>
